import React, { useEffect, useRef, useState } from 'react';
import { Breadcrumb, Pagination, Upload } from 'antd';
import style from '@/css/Tom/store_config.less';
import pub from '@/css/Tom/pub.less';
import Alert from '@/componts/jcomponts/Alert';

import { instance } from '../../../api/request';

function StoreConfig(props: any) {
  const { name, path } = props.route;
  const rot = [
    { name: '首页', path: '/' },
    { name: '门店', path: '/storeAllStore' },
    { name: name, path: path },
  ];
  const [Search, setSearch] = useState('');
  const [len, setLen] = useState(0);
  const [data, setData] = useState([]);
  const [fileList, setfileList] = useState([]);
  const [mes, setmes] = useState('分组管理');
  const childRef: any = useRef();
  useEffect(() => {
    // Update the document title using the browser API
    instance.get('/store/findImages').then((e) => {
      setLen(e.data.len);
      setData(e.data.data);
    });
  }, []);
  const upImgs = {
    name: 'file',
    action: '/store/upImage',
    method: 'post',
    onChange(info: any) {
      console.log(info);
    },
  };

  function onChange(pageNumber) {
    console.log('Page: ', pageNumber);
  }

  function upImg() {
    console.log('上传图片');
  }

  function changeGrouping(e: any) {
    console.log('分组管理');
    childRef.current.showModal('分组');
  }

  function onSearch(value: any) {
    if (value.length) {
      instance
        .get('/store/findImagesFuzzy?name=name&value=' + value)
        .then((e) => {
          setData(e.data);
        });
    } else {
      instance.get('/store/findImages').then((e) => {
        setLen(e.data.len);
        setData(e.data.data);
      });
    }
  }
  let timer: any = null;
  async function handleChange(e: any) {
    if (timer !== null) clearTimeout(timer);
    //  let callNow = !timer;
    timer = setTimeout(async function () {
      const formData = new FormData();
      e.fileList.forEach((file: any) => {
        formData.append('file', file.originFileObj);
      });
      const res: any = await instance.post('/store/upImage', formData);
      if (res.code === 200) {
        instance.get('/store/findImages').then((e) => {
          setLen(e.data.len);
          setData(e.data.data);
        });
      } else {
      }
    }, 500);
  }

  // @ts-ignore
  return (
    <div>
      <Breadcrumb>
        {rot.map((e) => (
          <Breadcrumb.Item key={e.name}>
            <a href={e.path}>{e.name}</a>
          </Breadcrumb.Item>
        ))}
        <Alert childRef={childRef} key="qwe" shows="2" title={mes}>
          新增
        </Alert>
      </Breadcrumb>
      <div className={pub.put_top}>{name}x</div>
      <div className={style.box}>{name}</div>

      <div className={style.look}>
        <div className={style.show}>
          <div className={style.center}>
            <div className={style.left}>
              <table>
                <tr>
                  <td>
                    <button onClick={changeGrouping}>分组管理</button>

                    <Upload
                      onChange={(e) => {
                        handleChange(e);
                      }}
                    >
                      <button>文件上传</button>
                    </Upload>
                  </td>
                  <td style={{ display: 'flex' }}>
                    <span style={{ textAlign: 'center', marginLeft: '20%' }}>
                      选择图片
                    </span>
                    <div style={{ width: '50%' }}>
                      <input
                        onChange={(e) => {
                          setSearch(e.target.value);
                        }}
                        style={{ width: '50%', border: '0' }}
                        type="text"
                        placeholder="请输入名称"
                      />
                      <button onClick={() => onSearch(Search)}>确定</button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div
                      style={{
                        width: '100%',
                        height: '350px',
                        fontSize: '16px',
                      }}
                    >
                      <div
                        style={{
                          width: '100%',
                          borderBottom: '2px solid black',
                        }}
                      >
                        未分组{' '}
                        <span style={{ marginLeft: '20%', color: '#8282E6' }}>
                          {len}
                        </span>
                      </div>
                    </div>
                  </td>
                  <td style={{ position: 'relative' }}>
                    <div
                      onClick={(e) => {
                        console.log(e.target.src);
                      }}
                      style={{
                        position: 'absolute',
                        top: '0',
                        display: 'flex',
                        overflow: 'auto',
                        justifyContent: 'start',
                        flexFlow: 'wrap row',
                        border: '0',
                        width: '100%',
                        height: '100%',
                        alignContent: '10px',
                        paddingRight: '5%',
                      }}
                    >
                      {data.map((e) => (
                        <div
                          style={{
                            width: '21%',
                            height: '30%',
                            marginTop: '3%',
                            marginLeft: '2%',
                          }}
                        >
                          <img
                            style={{ width: '100%', height: '90%' }}
                            src={e.imgUrl}
                            alt=""
                          />
                          <div style={{ width: '100%', overflow: 'hidden' }}>
                            {e.name}
                          </div>
                        </div>
                      ))}
                    </div>
                  </td>
                </tr>
              </table>
            </div>
            <div className={style.right}></div>
          </div>
          <div className={style.button}>
            <Pagination
              total={500}
              showSizeChanger={false}
              defaultCurrent={1}
              showQuickJumper
              onChange={onChange}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default StoreConfig;
